<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
  </head>
  <body>
    <div id="container">
      <input type="text" placeholder="歌曲名、歌手" v-model="keyword" />
      <button type="button" @click="doSearch">搜索</button>
      <table class="table table-bordered table-condensed">
        <tr>
          <th>序号</th>
          <th>歌曲ID</th>
          <th>歌曲名</th>
          <th>歌手</th>
          <th>专辑</th>
          <th>时长</th>
          <th>操作</th>
        </tr>
        <tr v-for="song,index in songs">
          <td>{{index+1}}</td>
          <td>{{song.id}}</td>
          <td>{{song.name}}</td>
          <td>
            <span v-for="artist in song.artists"> &nbsp;{{artist.name}} </span>
          </td>
          <td>{{song.album.name}}</td>
          <td width="8%">
            {{ Math.floor( Math.round(song.duration/1000)/60) < 10 ?
            '0'+Math.floor( Math.round(song.duration/1000)/60) : Math.floor(
            Math.round(song.duration/1000)/60) }} : {{
            Math.round(song.duration/1000)%60 <10 ? '0'+(
            Math.round(song.duration/1000)%60 ) :
            Math.round(song.duration/1000)%60 }}
          </td>
          <td width="10%">
            <button
              type="button"
              v-if="song.id == currentid && status==1"
              class="btn btn-warning btn-xs"
              @click="doPause"
              :data-mid="song.id"
            >
              暂停
            </button>

            <button
              type="button"
              v-else-if="song.id == currentid && status==0"
              class="btn btn-danger btn-xs"
              @click="doContinue"
              :data-mid="song.id"
            >
              继续播放
            </button>

            <button
              v-else
              type="button"
              class="btn btn-success btn-xs"
              @click="doPlay"
              :data-mid="song.id"
            >
              播放
            </button>

            <button
              type="button"
              v-if="song.mvid != 0"
              class="btn btn-primary btn-xs"
            >
              播放MV
            </button>
          </td>
        </tr>
      </table>
    </div>

    <audio style="width: 100%" src="" id="player"></audio>

    <script type="text/javascript" src="js/music.js"></script>
    <script type="text/javascript">
      var player = document.getElementById("player");

      var vm = new Vue({
        el: "#container",
        data: {
          keyword: "张韶涵",
          songs: [],
          currentid: 0,
          status: 0,
        },
        methods: {
          doSearch: function () {
            console.log(vm.keyword);
            $.get(
              "http://localhost:9999/music/search",
              { s: vm.keyword, limit: 15, offset: 0 },
              function (res) {
                console.log(res);
                if (res.code == 200) {
                  //获取此关键词搜索的总记录数
                  var count = res.result.songCount;
                  //获取音乐集合
                  var arr = res.result.songs;
                  vm.songs = arr;
                } else {
                  vm.songs = data;
                }
              },
              "json"
            );
          },
          doPlay: function (event) {
            vm.currentid = event.srcElement.dataset.mid;
            //网易云音乐播放地址： http://music.163.com/song/media/outer/url?id=songId
            player.src =
              "http://music.163.com/song/media/outer/url?id=" + vm.currentid;
            player.play();
            vm.status = 1;
          },
          doPause: function () {
            player.pause();
            vm.status = 0;
          },
          doContinue: function () {
            player.play();
            vm.status = 1;
          },
        },
      });
    </script>
  </body>
</html>
